<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户注册</title>
    <th:block th:fragment="commen-script">
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
      <link
              rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      />
      <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
    </th:block>
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;

      }
    </style>

  </head>
  <body th:style="'background:url(' + @{/img/background.jpg} +');'">
  <div style="font-size: xxx-large;text-align: center" class="p-4">物业管理系统 </div>
    <div class="d-flex justify-content-center">
      <div class="w-25 border shadow p-4 center-block">
        <div style="font-size: xx-large">用户注册</div>
        <hr />
        <form>
          <div class="form-group">
            <label for="cid">员工ID</label>
            <input type="text" class="form-control" id="cid" required placeholder="请输入员工ID" />
          </div>

          <div class="form-group">
            <label for="password">密码</label>
            <input
              type="password"
              class="form-control"
              id="password"
              required
            placeholder="请输入密码" 
            />
          </div>
          <div class="form-group">
            <label for="check_password">确认密码</label>
            <input
              type="password"
              class="form-control"
              id="check_password"
              placeholder="请再次确认密码" 
              required
            />
            <small id="check_password_help" class="form-text text-success"
              >应与上面的密码保持一致</small
            >
          </div>
        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" required placeholder="请输入姓名" />
          </div>
          
          <div class="form-group">
            <label for="phone">手机号码</label>
            <input type="tel" class="form-control" id="phone" required placeholder="请输入手机号码" />
          </div>
           <div class="form-group">
            <label for="number">身份证号</label>
            <input type="text" class="form-control" id="number" required placeholder="请输入手机号码" />
          </div>

        </form>
        <button onclick="registerUser()" class="btn btn-primary">注册</button>
        <hr />
        <div
          class="alert alert-warning"
          role="alert"
          id="alert"
          style="display: none"
        >

        </div>
        <div>已有账号？去<a th:href="@{/userlogin}">登录</a></div>
        <div class="text-primary"><a th:href="@{/home}">返回门户&raquo;</a></div>
      </div>

    </div>
    <script type="text/javascript">
      function registerUser() {
    let alert = document.getElementById("alert");
    alert.style.display = "none";
    let cid = document.getElementById("cid").value;
    let phone = document.getElementById("phone").value;
    let number = document.getElementById("number").value;
    let password = document.getElementById("password").value;
    let checkPassword = document.getElementById("check_password").value;
    let name=document.getElementById("name").value;
    if (cid == "" || password == "") {
        alert.innerHTML = "请输入员工ID和密码";
        alert.style.display = "block";
        return;
    }

    if (password.trim() != checkPassword.trim()) {
        alert.innerHTML = "请确认两次密码输入是否一致";
        alert.style.display = "block";
        return;
    }
    if (phone == "" || number == ""||name=="") {
        alert.innerHTML = "请将信息填写完整";
        alert.style.display = "block";
        return;
    }

    axios
        .post("userregister", {
            cid:cid,
            phone: phone,
            password: password,
            number: number,
        })
        .then(function (response) {
            console.log(response);
            let redirect = response.data.redirect;
            if (redirect == "undefined" || redirect == null || redirect == "") {
                alert.innerHTML = response.data.info;
                alert.style.display = "block";
                return;
            }
            window.location = response.data.redirect;
        })
        .catch(function (error) {
            console.log(error);
        });
}
    </script>
  </body>
</html>
